<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/dwzCustomJs/dwz.custom.hidequery.js" type="text/javascript" ></script>
<#include "/common/pagerForm.html">

<style>

.pieChart{
    border-width:0;
    margin:10px 0;
    padding:0;
    height:200px;
    width:100%;
}
.pieDiv{
    float: left;
    width: 32%;
    height:200px;
    border: 1px solid #DFE4E8;
}

.pieDiv h1{
    text-align:left;
    line-height:26px;
    padding-left:5px;
}
.pieDiv.third{
    margin-left:1.6%;
}
.pieDiv.second{
    margin-left:1.6%;
}

.pieHead{
    height:30px;
    border-bottom: 1px solid #DFE4E8;
}

.pieBody{
    height:168px;
    width:98%;
}

#tabs{
    float:left;
    margin:10px 0;
    padding:0;
    width:100%;
    border-bottom:1px solid #DFE4E8;
}

.lineDiv{
    margin:0 auto;
    height:300px;
    overflow:hidden;
}

#panel .panelHeader{
    border-left:0px;
}

</style>
<form rel="pagerForm" method="post" action="" class="required-validate" onsubmit="return navTabSearch(this)" >
    <div class="pageHeader" id="pageHeader">
        <div class="searchBar" >
            <ul class="searchContent">
                <input type="hidden" name="reportType" value="${condition.reportType}"/>
                <#if condition.reportType??&&condition.reportType=="MONTH">
                <li>
                    <label><@label key="checkMonth.C,colon">检验月份：</@label></label> 
                    <select name="endDateTime">
                    <#if endDateList??&&(endDateList?size>0)>
                        <#list endDateList as endDate>
                            <option value="${endDate?string('yyyy-MM-dd')}" <#if endDate?string('yyyy-MM-dd')==(condition.endDateTime?string('yyyy-MM-dd'))>selected="selected" </#if>>
                                ${(endDate?string("yyyy-MM-dd"))?substring(0,7)}
                            </option>
                        </#list>    
                    </#if>
                    </select>
                </li>
                <li>
                    <label><@label key="trendMonths.C,colon">趋势月数：</@label></label> 
                    <input type="text"   min="1"  max="12"name="quantity" value="${condition.quantity!''}" />
                </li>  
                <#else>
                <li >
                    <label><@label key="checkDate.C,colon">检验日期：</@label></label> 
                    <input type="text" class="date" readonly="readonly" name="endDateTime" value="${(condition.endDateTime?string('yyyy-MM-dd'))?if_exists}" dateFmt="yyyy-MM-dd" />
                    <a class="inputDateButton" href="javascript:;">选择</a>
                </li>
                <li>
                    <label><@label key="trendDays.C,colon">趋势天数：</@label></label> 
                    <input type="text"   min="1"  max="31" name="quantity" value="${condition.quantity!''}" />
                </li> 
                </#if>
                </ul>
            <ul class="searchContent">
                <li ><label ><@label key="workCenterCode.C,colon">工作中心编号:</@label></label> 
                    <input id="workCenterGrp.workCenterCode" name="workCenterCode" type="text"  suggestFields="workCenterCode,workCenterText" postField="workCenterCode" 
                    suggestUrl="${rc.getContextPath()}/manage/workCenter/workCenterSuggest" lookupGroup="workCenterGrp" autocomplete="off"  value="${condition.workCenterCode!''}"/>
                </li>
                <li ><label ><@label key="workUnitCode.C,colon">作业单元编号:</@label></label> 
                    <input id="workUnitGrp.workUnitCode" name="workUnitCode" type="text"  suggestFields="workUnitCode,workUnitText" postField="workUnitCode" 
                    suggestUrl="${rc.getContextPath()}/manage/workUnit/workUnitSuggest" lookupGroup="workUnitGrp" autocomplete="off"  value="${condition.workUnitCode!''}"/>
                </li>
                <li>
                    <label><@label key='materialCode.C,colon'>物料编号：</@label></label>
                    <input id="materialLookup.materialCode" name="materialCode" type="text" postField="materialCode" suggestFields="materialCode,materialText" 
                        suggestUrl="${rc.getContextPath()}/manage/material/componentSuggest" lookupGroup="materialLookup" 
                        value="${condition.materialCode!''}"/>
                </li>
                <li class="query" >
                    <div class="buttonActive"  style="float:right;">
                        <div class="buttonContent">
                            <button type="submit"><@label key="query.B">查询</@label></button>
                        </div>
                    </div>
                </li>
                <li class="query" >
                    <div  class="hideQuery">
                        <a id="exportToExcel"  
                        <#if condition.reportType??&&condition.reportType=="MONTH">
                            href="${rc.getContextPath()}/manage/qualityReport/exportMonthReport" 
                        <#else>
                            href="${rc.getContextPath()}/manage/qualityReport/exportDateReport" 
                        </#if>
                        target="multiExport" tableId="iTable"  
                        arrangement="pie1:newLine;pie2:right;pie3:right;line1:newLine;line2:newLine;line3:newLine;iTable:newLine;" title="<@label key='confirmexportToExcel.M'>确定要导出这些记录吗?</@label>">
                            <@label key='exportReport.C'>导出报表</@label>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div  class="hideQuery" id="hideQuery">
        <a id="hideQueryBtn" href="javascript:void(0);" showText="<@label key='expand.B'>展开</@label>" hideText="<@label key='hide.B'>隐藏</@label>">
            <@label key='hide.B'>隐藏</@label>
            <span></span>
        </a>
    </div>
</form>

<div id ="panel" class="panel" layoutH="92" style="overflow:auto;"><h1 style="text-align:left;"><@label key="graph.D">图表</@label></h1>

    <div  id=innerPanel" style="padding:10px;border-left:0px;">

    <div class="pieChart" >
        <div class="pieDiv first" >
            <div class="pieHead"><h1><@label key="defectLevel.C">缺陷等级</@label></h1></div>    
            <div class="pieBody" id="defectLevelPie"></div>    
        </div>
        <div class="pieDiv second" >
            <div class="pieHead"><h1><@label key="defectType.C">缺陷类型</@label></h1></div>    
            <div class="pieBody" id="defectTypePie"></div>    
        </div>
        <div class="pieDiv third" >
            <div class="pieHead"><h1><@label key="responsibilityType.C">责任类型</@label></h1></div>    
            <div class="pieBody" id="responsibilityTypePie"></div>    
        </div>
    </div>

    <div id="tabs" class="tabs"  currentIndex="0" eventType="click"  >
            <div class="tabsHeader">
                <div class="tabsHeaderContent">
                    <ul>
                        <li><a href="javascript:;"><span id="defectLevel"><@label key="defectLevel.C">缺陷等级</@label></span></a></li>
                        <li><a href="javascript:;"><span id="defectType"><@label key="defectType.C">缺陷类型</@label></span></a></li>
                        <li><a href="javascript:;" ><span id="responsibilityType"><@label key="responsibilityType.C">责任类型</@label></span></a></li>
                    </ul>
                </div>
            </div>
            <div class="tabsContent">
                
                <div id="defectLevelLine" class="lineDiv">
                
                </div>
                <div id="defectTypeLine" class="lineDiv">
                    
                </div>
                <div id="responsibilityTypeLine"class="lineDiv">
                
                </div>
            </div>
    </div>

    <table id="iTable" class="table border" style="float:left;margin:10px 0;padding:0;border-width:0; width:1400px;overflow:auto;"  >
            <thead>
                <tr>
                    <th width="40"><@label key="serialNumber.C">序号</@label></th>
                    <th width="180" field="createDateTime" ><@label key="collectDateTime.C">采集时间</@label></th>
                    <th width="120" field="workCenterCode" orderField="workCenterCode"<#if (page.orderField?? && page.orderField == 'workCenterCode')>class="${page.orderDirection!''}"</#if>><@label key="workCenterCode.C">工作中心</@label></th>
                    <th width="120" field="workUnitCode" orderField="workUnitCode"<#if (page.orderField?? && page.orderField == 'workUnitCode')>class="${page.orderDirection!''}"</#if>><@label key="workUnitCode.C">作业单元</@label></th>
                    <th width="150" field="productionControlNum" ><@label key="productionControlNum.C"> 生产管理号</@label></th>
                 	<th width="150" field="productionOrderNum" orderField="productionOrderNum"<#if (page.orderField?? && page.orderField == 'productionOrderNum')>class="${page.orderDirection!''}"</#if>><@label key="productionOrderNum.C">生产订单</@label></th>
                    <th width="120" field="operationCode" ><@label key="checkedOperation.C">检验工序</@label></th>
                    <th width="120" field="defectLevelCode" ><@label key="defectLevelCode.C">缺陷等级</@label></th>
                    <th width="120" field="defectLevelText" ><@label key="defectLevelText.C">缺陷等级描述</@label></th>
                    <th width="120" field="defectTypeCode" ><@label key="defectTypeCode.C">缺陷类型</@label></th>
                    <th width="120" field="defectTypeText" ><@label key="defectTypeText.C">缺陷类型描述</@label></th>
                    <th width="120" field="responsibilityTypeCode" ><@label key="responsibilityTypeCode.C">责任类型</@label></th>
                    <th width="120" field="responsibilityTypeText" ><@label key="responsibilityTypeText.C">责任类型描述</@label></th>
                    <th width="120" field="defectCode" ><@label key="defectCode.C">缺陷编号</@label></th>
                    <th width="120" field="defectText" ><@label key="defectText.C">缺陷描述</@label></th>
                    <th width="100" field="quantity" ><@label key="quantity.C">数量</@label></th>
                    <th width="80"  field="customer" ><@label key='customer.C'>客户</@label></th>
	                <th width="100" field="customerOrder" ><@label key='customerOrder.C'>客户订单</@label></th>
	                <th width="80"  field="priority" ><@label key='priority.C'>优先级</@label></th>
                </tr>
            </thead>
            <tbody>
                <#if data??><#if (data?size>0)> <#list data as report>
                <tr>
                    <td>${report_index+1}</td>                    
                    <td>${report.createDateTime?string("yyyy-MM-dd")}</td>
                    <td>${report.workCenterCode!''}</td>
                    <td>${report.workUnitCode!''}</td>
                    <td>${report.productionControlNum!''}</td>
                    <td>${report.productionOrderNum!''}</td>
                    <td>${report.operationCode!''}</td>
                    <td>${report.defectLevelCode!''}</td>
                    <td>${report.defectLevelText!''}</td>
                    <td>${report.defectTypeCode!''}</td>
                    <td>${report.defectTypeText!''}</td>
                    <td>${report.responsibilityTypeCode!''}</td>
                    <td>${report.responsibilityTypeText!''}</td>
                    <td>${report.defectCode!''}</td>
                    <td>${report.defectText!''}</td>
                    <td>${report.quantity!''}</td>
                    <td>${report.customer!''}</td>
                    <td>${report.customerOrder!''}</td>
                    <td>${report.priority!''}</td>
                </tr>
                </#list> <#else>
                    <tr >
                    <td colspan="7"  class="noData">======<@label key="noListData.C">列表无数据</@label>=====
                    </td>
                </tr>
                </#if> <#else>
                <tr >
                    <td colspan="7"  class="noData">======<@label key="noListData.C">列表无数据</@label>=====
                    </td>
                </tr>
                </#if>
            </tbody>
        </table>

    </div>
</div>  




<script>
Date.prototype.format=function (){
    var s='';
    s+=this.getFullYear()+'-';// 获取年份。
    s+=(this.getMonth()+1)+"-";         // 获取月份。
    s+= this.getDate();                 // 获取日。
    return(s);                          // 返回日期。
    };

$(function(){
      //保存表单数据
      var $navTab=navTab.getCurrentPanel();
      var formData=$("form",$navTab).serializeArray();
          var showPieByType=function(type,option,chart){
              $.DWZajax({
                url:"${rc.getContextPath()}/manage/qualityReport/qualityReportForPie?groupType="+type,
                data:formData,
                callback:function (data)
                {
                    list=data;
                    var seriesData=[];
                    var legendData=[];
                    $.each(list,function(i,n){
                        seriesData.push({"name":list[i].text,"value":list[i].count});
                    });
                    $.each(list,function(i,n){
                        legendData.push(list[i].text);
                    });
                    option.series[0].data=seriesData;
                    option.legend.data=legendData;
                    chart.setOption(option,true);
                }
            });
        };
        
        
        
        var showLineByType=function(type,option,chart){
            $.DWZajax({
                url:"${rc.getContextPath()}/manage/qualityReport/qualityReportForLine?groupType="+type,
                data:formData,
                callback:function (data)
                {
                    var chartData=data;
                     var textArray= chartData.textArray;
                    var dataArray=chartData.dataArray; 
                    var dateArray=chartData.dateArray; 
                    
                     var series=[];
                    var seriesData=[];
                    for(var i=0;i<dataArray.length;i++)
                    {
                        var size=dataArray[i].length;
                        seriesData[i]=[];
                        for(var j=0;j<size;j++)
                        {
                            seriesData[i].push(dataArray[i][j]);
                        }
                        option.series.push({data:seriesData[i],name:textArray[i],type:"line"});
                    } 
                    option.legend.data=textArray;  
                    option.xAxis[0].data=dateArray;  
                     if(textArray.length===0)
                    {
                         //显示 无数据loading
                        option.series=[];
                        option.series.push({data:[],type:'line'});
                    }
                    chart.setOption(option,true);
                    //清空option数据
                    option.series=[];
                    
                }
            });
        };
        
        
var pieOption = { 
        title : {
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'right',
            y : 'center',
            data:[]
        },
        calculable : false,
        series : [
            {
                name:'',
                type:'pie',
                radius : '90%',
                center: ['50%', '50%'],
                data:[],
                itemStyle:{ 
                    normal:{ 
                          label:{ 
                            show: true, 
                            position : 'inner',
                            formatter : function (params) {                         
                                return (params.percent - 0).toFixed(0) + '%'
                              }
                          }, 
                          labelLine :{show:false} 
                        } 
                } 
            }
        ],
        noDataLoadingOption:{
            text :"<@label key='noData.C'>暂无数据</@label>",
            effect : 'whirling',
        }
    };
    
var lineOption = {
        title : {
            text: '',
        },
        animation:false,
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
       
        calculable : false,
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
            }
        ],
        series : [
        ],
        noDataLoadingOption:{
            text :"<@label key='noData.C'>暂无数据</@label>",
            effect : 'whirling',
                effectOption:{
                   backgroundColor:"#fff",
            }
        }
    };
           
require.config({
     paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
   });
var pic=require(
       [
           'echarts',
           'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
           'echarts/chart/pie'
       ],
       function (ec) {
           var color1=[
                              '#d97a80','#2ec8ca','#b6a2df','#5bb0f0',
                            '#ffb880','#7ad8bf','#7a9dd8','#1380ce',
                            '#d89b7a','#dea2ad'
                       ];
           var color2=[
                            '#00acc6','#4f93b6','#85a959','#fba565',
                            '#00aee3','#0084c6','#fe8463','#9bca63',
                            '#fad860','#60c0dd',
                   ];
           var color3=[
                            '#f6a248','#1dcad1','#1ea1e4','#54ad45',
                            '#dd7082','#68c359','#3a8db7','#e29039',
                            '#50ced3','#f49cab',    
                   ];
           //拷贝option并设置颜色主题
           function newOption(optionCopyBy,colorTheme){
               var option={};
               $.extend(true,option,optionCopyBy);
               option.color=colorTheme;
               return option;
           }
           //饼图
           var $navTab=navTab.getCurrentPanel();
           var defectLevelPie = ec.init($('#defectLevelPie',$navTab)[0]);
           
           var defectTypePie = ec.init($('#defectTypePie',$navTab)[0]);
           var responsibilityTypePie = ec.init($('#responsibilityTypePie',$navTab)[0]);
           
           
           showPieByType("defectLevel",newOption(pieOption,color1),defectLevelPie,formData);
           
           showPieByType("defectType",newOption(pieOption,color2),defectTypePie,formData);
           
           showPieByType("responsibilityType",newOption(pieOption,color3),responsibilityTypePie,formData);
           
           //折线图
           var defectLevelLine = ec.init($('#defectLevelLine',$navTab)[0]);
           $('#defectTypeLine',$navTab).show();//先show后hide 给隐藏的tab div 宽高度才能初始化
           var defectTypeLine = ec.init($('#defectTypeLine',$navTab)[0]);
           $('#defectTypeLine',$navTab).hide();
           $('#responsibilityTypeLine',$navTab).show();
           var responsibilityTypeLine = ec.init($('#responsibilityTypeLine',$navTab)[0]);
           $('#responsibilityTypeLine',$navTab).hide();
           

           lineOption.color=color1;
           showLineByType("defectLevel",newOption(lineOption,color1),defectLevelLine,formData);
           
           lineOption.color=color2;
           showLineByType("defectType",newOption(lineOption,color2),defectTypeLine,formData);
           
           lineOption.color=color3;
           showLineByType("responsibilityType",newOption(lineOption,color3),responsibilityTypeLine,formData);
         
          
          var $exportToExcel=$("#exportToExcel",$navTab);
          $exportToExcel.data("pie1",defectLevelPie);
          $exportToExcel.data("pie2",defectTypePie);
          $exportToExcel.data("pie3",responsibilityTypePie);
          $exportToExcel.data("line1",defectLevelLine);
          $exportToExcel.data("line2",defectTypeLine);
          $exportToExcel.data("line3",responsibilityTypeLine);
       });

});

</script>